<template>
  <div>
    <!-- 收货地址 -->
    <div class="cart-top" v-if="address">
      <div class="receive">
        <div class="name">收货人:{{address.userName}}</div>
        <div class="phonen-number">{{address.telNumber}}</div>
      </div>
      <div class="address">收货地址:{{allAddress}} </div>
      <img src="../../../static/images/cart_border@2x.png" class="address-bar" mode="aspectFill">
    </div>
    <div class="add_addresss" v-else @click="getAddress">
      <text>新增收货人</text>
      <span></span>
    </div>
    <div class="list-title">优购生活馆</div>
    <!-- 商品列表信息 -->
    <div class="ware-list">
      <div class="ware-item" :key="item.goods_id" v-for="item in cart">
        <!-- 左侧按钮checkbox -->
        <div class="choice-button">
          <icon @click="ginglecheck(item.goods_id)" type='success' :color="item.checked?'red':'#eee'" size='18'/>
        </div>
        <!-- 右侧商品信息 -->
        <div class="ware-content">
          <!-- 左侧图片 -->
          <navigator class='ware-image'>
            <img :src="item.goods_small_logo" mode="aspectFill"/>
          </navigator>
          <!-- 右侧商品信息 -->
          <div class="ware-info">
            <!-- 商品名称 -->
            <navigator class='ware-title'>
              {{item.goods_name}}
            </navigator>
            <!-- 商品价格和数量变更 -->
            <div class="ware-info-btm">
              <!-- 商品价格 -->
              <div class="ware-price">
                <span>￥</span>
               {{item.goods_price}}
              </div>
              <!-- 数量变更 -->
              <div class="calculate">
                <div class="rect" >-</div>
                <div class="number">{{item.num}}</div>
                <div class="rect">+</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部菜单布局 -->
    <div class="cart-total">
      <!-- 左侧CheckBox -->
      <div class="total-button">
        <icon color='#eee' type='success' size='18'/>全选
      </div>
      <!-- 中间的价格 -->
      <div class="total-center">
        <div class="total-price">合计：
          <text class="colorRed">
            <text>￥</text>
          </text>
        </div>
        <div class="price-tips">包含运费</div>
      </div>
      <!-- 右侧结算按钮 -->
      <div class="accounts" >
        结算
      </div>
    </div>
  </div>
</template>
<script>
import request from '../../utils/request';
import SearchBar from '../../components/SearchBar';
export default {
  data () {
    return {
      address:null,
      cart:{}
    }
  },
  components:{
    'search-bar':SearchBar
  },
  computed:{
    // 收货人这里做计算
    allAddress(){
      // 需要做非空判断
      if(!this.address){
        return ''
      }
      let {provinceName,cityName,countyName,detailInfo} = this.address;
      return `${provinceName}${cityName}${countyName}${detailInfo}`
    }
  },
  methods:{
    // 左侧单选按钮操作
    ginglecheck(id){
    // var c = this.$set(this.cart,this.cart[id].checked,!this.cart[id].checked);
    // this.cart[id].checked = c;
    // 因为checked属性时后面添加的,所以不是响应式属性
   var c = JSON.parse(JSON.stringify(this.cart));
     c[id].checked = !c[id].checked;
     this.cart = c;
    },
    getAddress(){
      let that = this;
    wx.chooseAddress({
      success (res) {
      that.address = res
  } 
})
    }
  },
  onShow(){
    // 在这里拿到缓存中的购物车数据
    this.cart = wx.getStorageSync('mycart')
    console.log(this.cart);
  }
}
</script>
<style lang="less" scoped>
 @import './main.less';
</style>

